<template>
  <div class="register">
    <div class="close" @click="close()">
      <img src="../../../assets/image/user/close-ico.png" alt />
    </div>
    <h2 class="title">新用户注册</h2>
    <div class="username inp">
      <input type="text" placeholder="请输入手机号" />
    </div>

    <div class="password inp">
      <input type="text" placeholder="请输入密码" />
    </div>
    <div class="hua-wrap">
      <vue-simple-verify ref="verify" @success="success" />
    </div>
    <div class="verif-code inp">
      <input type="text" placeholder="短信验证码" />
      <div class="primary-color get-code">获取验证码</div>
    </div>
    <div class="option">
      <img src="../../../assets/image/user/check-active-ico.png" alt />
      我已接受
      <span class="primary-color">《注册协议》</span>
    </div>
    <div class="btn">登录</div>
    <div class="hint">
      已有账号？请直接
      <span class="path" @click="skip">登录</span>
    </div>
  </div>
</template>

<script>
import "node_modules/vue-simple-verify/dist/vue-simple-verify.css";
import VueSimpleVerify from "vue-simple-verify";

export default {
  data() {
    return {};
  },
  components: {
    VueSimpleVerify
  },
  methods: {
    close() {
      let data = {
        userVivew: false,
        showVivew: ""
      };
      this.$store.commit("SET_VIEW", data);
    },
    skip() {
      this.$store.commit("SET_VIEW", { userView: true, showView: "login" });
    },
    success() {}
  }
};
</script>

<style lang="less" scoped>
@import "../common/index.less";
.slide {
  position: relative;
  text-align: center;
  color: #bbbbbb;
  background: #f7f7f7;
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 43px;
    height: 43px;
  }
}

.option {
  display: flex;
  justify-content: flex-start;
  img {
    margin-right: 5px;
  }
}
</style>
<style>
.hua-wrap .simple-verify {
  width: 100% !important;
  margin-bottom: 20px;
  border-radius: 20px !important;
  overflow: hidden;
  /* margin-bottom: 20px;
  padding: 10px 20px; */
}
</style>
